function checkImgs() {
  const imgs = Array.from(document.querySelectorAll(".my-photo"));
  imgs.forEach(item => io.observe(item));
}

function loadImg(el) {
  if (!el.src) {
    const source = el.dataset.src;
    el.src = source;
  }
}
// ioes 是一个数组 都是IntersectionObserverEntry对象
// 举例来说，如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员。
// IntersectionObserverEntry 是 Intersection Observer API 的接口，
// 描述了在特定转换时刻目标元素与其根容器之间的交集。可以通过 IntersectionObserver 回调的 entries 参数获得 IntersectionObserverEntry 实例；
// 否则，只能通过调用 IntersectionObserver.takeRecords() 来获取这些对象。
function callback_ioes(ioes){
  ioes.forEach(ioe=>{
    const el = ioe.target;//被观察的目标元素，是一个 DOM 节点对象

    // 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，
    // 完全可见时为1，完全不可见时小于等于0
    const intersectionRatio=ioe.intersectionRatio;
    // 进入可视区域加载图片
    if (intersectionRatio > 0 && intersectionRatio <= 1) {
      loadImg(el);
      io.unobserve(el);
    }

  })
}
const io = new IntersectionObserver(ioes => {
  ioes.forEach(ioe => {
    const el = ioe.target;
    const intersectionRatio = ioe.intersectionRatio;
    if (intersectionRatio > 0 && intersectionRatio <= 1) {
      loadImg(el);
      
    }
    // img加载后 关闭对改
    el.onload = el.onerror = () => io.unobserve(el);
  });
});
